<template>
  <transition name="slide-up">
    <div
      class="setting-wrapper"
      v-show="ifFontSizeShow"
    >
      <div class="tick-slider">
        <div class="tick-preview">
          <div class="preview">A</div>
          <div class="preview">A</div>
        </div>
        <div class="tick-slider-value-container">
          <div id="weightValue" class="tick-slider-value"></div>
        </div>
        <div class="tick-slider-background"></div>
        <div
          id="weightProgress"
          class="tick-slider-progress"
        ></div>
        <div
          id="weightTicks"
          class="tick-slider-tick-container"
        >
          <span class="tick-slider-tick" v-for="(item, index) in sliderTick" :key="index"></span>
        </div>
        <input
          id="weightSlider"
          class="tick-slider-input"
          type="range"
          min="12"
          max="24"
          step="2"
          :value="defaultFontSize"
          data-tick-step="2"
          data-tick-id="weightTicks"
          data-value-id="weightValue"
          data-progress-id="weightProgress"
          data-handle-size="18"
        />
      </div>
    </div>
  </transition>
</template>

<script>
export default {
  name: 'EbooksFontSize',
  props: {
    ifFontSizeShow: {
      type: Boolean,
      default: false
    },
    fontSizeList: Array,
    defaultFontSize: Number,
  },
  data() {
    return {
      sliderTick: [12, 14, 16, 18, 20, 22, 24]
    }
  },
  mounted() {
    // this.init();
  },
  methods: {
    init() {
      const sliders = document.getElementsByClassName("tick-slider-input");
      for (let slider of sliders) {
        slider.oninput = this.onSliderInput;
        this.updateValue(slider, false);
        this.updateValuePosition(slider);
        // this.updateLabels(slider);
        this.updateProgress(slider);
        // this.setTicks(slider);
      }
    },
    onSliderInput(event) {
      this.updateValue(event.target, true);
      this.updateValuePosition(event.target);
      // this.updateLabels(event.target);
      this.updateProgress(event.target);
    },
    updateValue(slider, Boolean) {
      let value = document.getElementById(slider.dataset.valueId);
      value.innerHTML = "<div>" + slider.value + "</div>";
      // value.innerHTML = slider.value;
      this.$emit('setFontSize', slider.value, Boolean)
    },
    updateValuePosition(slider) {
      let value = document.getElementById(slider.dataset.valueId);
      const percent = this.getSliderPercent(slider);
      const sliderWidth = slider.getBoundingClientRect().width;
      const valueWidth = value.getBoundingClientRect().width;
      const handleSize = slider.dataset.handleSize;
      let left = percent * (sliderWidth - handleSize) + handleSize / 2 - valueWidth / 2;
      // let left = percent * sliderWidth - valueWidth / 2;
      left = Math.min(left, sliderWidth - valueWidth);
      left = slider.value === slider.min ? 0 : left;
      // left = (left / sliderWidth) * 100
      value.style.left = left + "px";
    },
    updateProgress(slider) {
      let progress = document.getElementById(slider.dataset.progressId);
      const percent = this.getSliderPercent(slider);

      progress.style.width = percent * 100 + "%";
    },
    getSliderPercent(slider) {
      const range = slider.max - slider.min;
      const absValue = slider.value - slider.min;

      return absValue / range;
    },
    setTicks(slider) {
      let container = document.getElementById(slider.dataset.tickId);
      const spacing = parseFloat(slider.dataset.tickStep);
      const sliderRange = slider.max - slider.min;
      const tickCount = sliderRange / spacing + 1; // +1 to account for 0

      for (let ii = 0; ii < tickCount; ii++) {
        let tick = document.createElement("span");

        tick.className = "tick-slider-tick";
        tick.style = 'width: 0.05rem;height:1.35rem;background:#fff;'
        container.appendChild(tick);
      }
    },
    onResize() {
      const sliders = document.getElementsByClassName("tick-slider-input");

      for (let slider of sliders) {
        this.updateValuePosition(slider);
      }
    },
    // touchstart(e) {
    //   distanceX = e.touches[0].clientX - e.currentTarget.offsetLeft;
    // },
    // touchmove(e) {
    //   const pannel = this.$refs.nstSlider;
    //   const w = pannel.clientWidth;
    //   let left = e.touches[0].clientX - distanceX;
    //   const config = this.config;
    //   left = left >= 0 ? left : 0;
    //   left = left <= w ? left : w;
    //   const p = left / w;
    //   this.process = p * 100;
    //   this.processValue = Math.floor((p * (config.max - config.min) + config.min) / config.round)
    //     * config.round;
    //   this.$emit('change', this.processValue);
    // }
  },
}
</script>

<style lang="less" scoped>
.setting-wrapper {
  position: fixed;
  bottom: 3.2rem;
  left: 0;
  width: 100%;
  height: 4.85rem;
  z-index: 102;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  border-bottom: 1px solid #f6f6f6;
  //旧得
  .setting-font-size {
    display: flex;
    width: 100%;
    height: 100%;
    .preview {
      flex: 0 0 2rem;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .select {
      flex: 1;
      display: flex;
      .select-wrapper {
        flex: 1;
        display: flex;
        align-items: center;
        &:first-child {
          .line {
            &:first-child {
              border-top: none;
            }
          }
        }
        &:last-child {
          .line {
            &:last-child {
              border-top: none;
            }
          }
        }
        .line {
          flex: 1;
          height: 0;
          border-top: 0.05rem solid #ccc;
        }
        .point-wrapper {
          flex: 0 0 0;
          width: 0;
          height: 0.35rem;
          border-left: 0.05rem solid #ccc;
          position: relative;
          .point {
            position: absolute;
            top: -0.4rem;
            left: -0.5rem;
            width: 1rem;
            height: 1rem;
            border-radius: 50%;
            background-color: #fff;
            border: 0.05rem solid #ccc;
            box-shadow: 0 0.2rem 0.2rem rgba(0, 0, 0, 0.15);
            display: flex;
            justify-content: center;
            align-items: center;
            .small-point {
              width: 0.25rem;
              height: 0.25rem;
              background-color: #000;
              border-radius: 50%;
            }
          }
        }
      }
    }
  }
  // 新得
  .tick-slider {
    position: relative;
    width: 100%;
    height: 1.35rem;
    margin: 0 1rem;
    .tick-preview {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 1.35rem;
      padding: 0 .6rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      pointer-events: none;
      .preview {
        color: #fff;
        font-size: .5rem;
        &:last-child {
          color: #666;
          font-size: .7rem;
        }
      }
    }
    .tick-slider-value-container {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 1.35rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      z-index: 22;
      pointer-events: none;
      .tick-slider-value {
        position: absolute;
        top: 0;
        width: 1.35rem;
        height: 1.35rem;
        display: flex;
        justify-content: center;
        align-items: center;
        font-weight: bold;
        color: #248AFD;
        font-size: .6rem;
        z-index: 2;
        pointer-events: none;
        box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.1);
        background: #fff;
        border-radius: 50%;
      }
    }
    .tick-slider-background {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 1.35rem;
      border-radius: 0.7rem;
      background: #f2f2f2;
      z-index: -1;
    }
    .tick-slider-progress {
      position: absolute;
      top: 0;
      left: 0;
      height: 1.35rem;
      border-radius: .7rem;
      background: #4893f8;
      z-index: -1;
    }
    .tick-slider-tick-container {
      position: absolute;
      top: 0;
      left: 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      z-index: -1;
      .tick-slider-tick {
        width: 0.05rem;
        height: 1.35rem;
        background: #fff;
        &:first-child {
          background: transparent;
        }
        &:last-child {
          background: transparent;
        }
      }
    }
    .tick-slider-input {
      width: 100%;
      height: 100%;
      background: transparent;
      outline: none;
    }
  }
}
input[type="range"]::-webkit-slider-thumb {
  position: relative;
  -webkit-appearance: none;
  height: 1.35rem;
  width: 1.35rem;
  background:transparent;
  border-radius: 50%; /*外观设置为圆形*/
  z-index: 2;
  background: transparent;
  border: 0;
}
.slide-down-enter,
.slide-down-leave-to {
  transform: translate3d(0, -100%, 0);
}
.slide-down-enter-to,
.slide-down-leave,
.slide-up-enter-to,
.slide-up-leave {
  transform: translate3d(0, 0, 0);
}
.slide-down-enter-active,
.slide-down-leave-active,
.slide-up-enter-active,
.slide-up-leave-active {
  transition: all 0.3s linear;
}
.slide-up-enter,
.slide-up-leave-to {
  transform: translate3d(0, 4.85rem, 0);
}
</style>